<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description('Tests for tooLong flag with &lt;input> elements.');

var input = document.createElement('input');
document.body.appendChild(input);

debug('No maxlength and no value');
shouldBeFalse('input.validity.tooLong');

debug('');
debug('Non-dirty value');
input.setAttribute('value', 'abcde');
input.maxLength = 3;
shouldBe('input.value.length', '5');
shouldBeFalse('input.validity.tooLong');

input.setAttribute('value', 'abcdef');
shouldBe('input.value.length', '6');
shouldBeFalse('input.validity.tooLong');

debug('');
debug('Dirty value and longer than maxLength');
input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', 'abcde');
input.maxLength = 3;
input.focus();
input.setSelectionRange(5, 5);  // Move the cursor at the end.
eventSender.keyDown('Backspace');
shouldBe('input.value.length', '4');
shouldBeTrue('input.validity.tooLong');
// Make the value <=maxLength.
eventSender.keyDown('Backspace');
shouldBeFalse('input.validity.tooLong');

debug('');
debug('Sets a value via DOM property');
input.maxLength = 3;
input.value = 'abcde';
shouldBeFalse('input.validity.tooLong');

debug('');
debug('Disabling makes the control valid');
input.focus();
input.setSelectionRange(5, 5);  // Move the cursor at the end.
eventSender.keyDown('Backspace');
shouldBeTrue('input.validity.tooLong');
shouldBeTrue('input.disabled = true; input.validity.tooLong');
shouldBeTrue('input.disabled = false; input.validity.tooLong');

debug('');
debug('Grapheme length is not greater than maxLength though character length is greater');
// fancyX should be treated as 1 grapheme.
// U+0305 COMBINING OVERLINE
// U+0332 COMBINING LOW LINE
var fancyX = "x\u0305\u0332";
input = document.createElement('input');
document.body.appendChild(input);
input.value = fancyX + 'A'; // 4 characters, 2 grapheme clusters.
input.maxLength = 1;
input.focus();
shouldBeFalse('input.validity.tooLong');
eventSender.keyDown('Backspace'); // Make the value dirty, 1 grapheme remains.
// Too long because there are three characters.
shouldBe('input.value.length', '3');
shouldBeTrue('input.validity.tooLong');

debug('');
debug('Change the type with a too long value');
input.maxLength = 3;
input.value = 'abcde';
input.type = 'search';
input.focus();
input.setSelectionRange(5, 5);
eventSender.keyDown('Backspace');
shouldBeTrue('input.validity.tooLong');
shouldBeFalse('input.type = "number"; input.validity.tooLong');
input.type = "text";

debug('');
debug('minlength and maxlength together');
input.maxLength = 3;
input.minLength = 3;
input.value = 'abcde';
input.focus();
input.setSelectionRange(5, 5);
eventSender.keyDown('Backspace');
shouldBeTrue('input.validity.tooLong');
shouldBeFalse('input.validity.tooShort');
eventSender.keyDown('Backspace');
shouldBeFalse('input.validity.tooLong');
shouldBeFalse('input.validity.tooShort');
eventSender.keyDown('Backspace');
shouldBeFalse('input.validity.tooLong');
shouldBeTrue('input.validity.tooShort');

debug('');
debug('minlength and maxlength clashing');
input.setAttribute('maxlength', '2');
input.setAttribute('minlength', '4');
input.value = 'abcde';
input.focus();
input.setSelectionRange(5, 5);
eventSender.keyDown('Backspace');
shouldBeTrue('input.validity.tooLong');
shouldBeFalse('input.validity.tooShort');
eventSender.keyDown('Backspace');
shouldBeTrue('input.validity.tooLong');
shouldBeTrue('input.validity.tooShort');
eventSender.keyDown('Backspace');
shouldBeFalse('input.validity.tooLong');
shouldBeTrue('input.validity.tooShort');
eventSender.keyDown('Backspace');
eventSender.keyDown('Backspace');
shouldBeFalse('input.validity.tooLong');
shouldBeFalse('input.validity.tooShort');

</script>
</body>
</html>
